In the last lesson, we added the process of submitting a new item mural, sending it to the main process
and listening for a reply with the item details.
We also styled the items for when we eventually add them to the app.
So in this lesson, then will remove this time out in the main process, which we're simulating the
time it's going to take to get a new items, details and add the actual logic for doing that.
As mentioned before, we'll use an off screen browser window to fetch the item details from the given
URL.
I'll also be separating the code for getting a new item into a separate module.
So first thing, change the set time out to a function called read item.
The function will create and import in a second, keeping the callback function with the response message.
Except that this callback will now hold the new item as its only argument and pass to the read item
function the Eurail of the item to get as its first argument.
Get rid of this time sending to the renderer the new item provided by this function callback.
There we get a request from the renderer for a new item.
Pass that item to read item which doesn't exist yet.
Read it, providing us a callback with that new item which we send back to the renderer via IPSI.
We can now add the module from which to import the item function.
So start with the require statement for that module before we created const read item.
As this module will export, the single function only equals require read item in the current directory.
Could have named this read item dodgiest.
Also create the module file in the project route as we're importing it here.
New file reader item.
Doges this module.
Then exporting that read item function will essentially create a new off screen browser window, load
the item URL into that window and get from that a screenshot and the page title.
So knowing that require the browser window module.
From electron.
Then, as with any new browser window, create a global reference to hold that browser window instant's
and prevent it from being garbage collected Caldas off screen window.
And export the single function provided by this module setting module exports, so overwriting all the
module exports equal to an anonymous function, receiving a Eurail and a callback function to execute
with the item retrieved from the funeral exactly as we're passing it in here.
Create the offscreen window.
Assigning to the global off screen window variable, a new browser window with a width of 500 and a
height of 500, remember, the screenshot will be getting from this browser window will be the size.
So a 500 by 500 square should do the trick set show to false worth.
Some Web preferences off screen to true.
OK, that's our offscreen window ready, so load the item you into this browser window or renderer.
This time using load fuel instead of load file passing in the oral given to this function, then we'll
wait for this.
You are all to finish loading before getting the item, screenshot or title.
So listen on off screen windows, web contents.
For the dead finish load event.
Passing a callback where we can first get the page title.
Assigned to title.
Off screen window get title.
And a screenshot or thumbnail of the fully loaded page, we can do this in a slightly different way
than we've seen before, being remote content, calling on the Windows Web content capture page.
This function returns a promise so resolved within passing a callback to fire in which we get one argument
being that image again being of type native image.
And the easiest way to use this image is going to be as a data neutral.
This way we can store the image data easily and not write out any files to the app assigning to screenshot
image dot to data neutral.
This being our final step of getting the item, we now have the item title thumbnail and of course the
original URL.
So past all of this, back to the color of this function via the function callback.
Executing callback, this callback function pass to the readout item function with the new item object
as this callbacks only argument, setting the item title to this title variable, which we can simply
write like this, having the key and value names match screenshot.
So sitting on the screenshot key of this item object, the screenshot variable and lastly, the original
URL of this item, a useful addition to complete the item object.
I'll also clean up this offscreen window as we are done with it.
Just good practice closing the window with offscreen window close and setting the global window reference
to null there.
That's all we need this read item function to do.
We call the function with the item overall and a callback function as we do here, get all of the item
details in an off screen window and execute the callback with that new item object.
That callback still sending the item to the main renderer or main window via IPSI where we log it out.
So let's test this, save both files.
I'll add a valid URL this time.
Electron Jast dot org.
Enter, which disables our mobile controls whilst we wait for this item to be fetched in the main process,
and as soon as that item is done, the main processor sends it back where we log it to the main window
console.
I'll expand this item object screenshot with the image data as a data neutral title, the electronic
homepage title and URL being the item YORO.
We submit it.
So that's our item ready to be added to the app in the next day.
And then we can finally add the items we've already styled in this container here and also add some
basic storage.